<template>
  <div id="dialogEdit">
    <el-dialog
      class="about-set"
      title="添加参数"
      :visible.sync="dialogAddData.isShow"
      width="700px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="参数名称" prop="configName">
            <el-input v-model="ruleForm.configName"></el-input>
          </el-form-item>
          <el-form-item label="参数键名" prop="configKey">
            <el-input v-model="ruleForm.configKey"></el-input>
          </el-form-item>
          <el-form-item label="参数键值" prop="configValue">
            <el-input v-model="ruleForm.configValue"></el-input>
          </el-form-item>
          <el-form-item label="数据类型" prop="dataType">
            <template>
              <el-select v-model="ruleForm.dataType" placeholder="不限">
                <el-option
                  v-for="item in dataTypeList"
                  :key="item.value"
                  :label="item.desc"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="取值范围" prop="dataRanges">
            <el-input v-model="ruleForm.dataRanges"></el-input>
          </el-form-item>
          <el-form-item label="系统内置">
            <template>
              <el-radio
                v-for="item in orderList"
                :key="item.dictValue"
                v-model="ruleForm.configType"
                :label="item.dictValue"
              >
                {{ item.dictLabel }}
              </el-radio>
            </template>
          </el-form-item>
          <el-form-item label="备注" prop="msg">
            <el-input
              v-model="ruleForm.remark"
              type="textarea"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getForm, parameterName, addConfig } from '@/api/system/parameter' // 接口
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'DialogAddEdit',
  msg: '参数设置-新增弹窗',
  props: ['dialogAddData'],
  data() {
    return {
      loading: false,
      ruleForm: {
        configName: '', // 参数名称
        configKey: '', // 参数键值
        configType: 'Y', // 添加用户
        configValue: '',
        dataType: [],
        remark: '',
        dataRanges: ''
      },
      orderList: [], // 系统内置状态
      dataTypeList: [
        {
          value: 'number',
          desc: '数值类型（限制数值大小，输入数值区间（1~10）或最大值（10））'
        },
        {
          value: 'char',
          desc:
            '字符类型（限制参数值可输入的字符，多个字符需要用“,”隔开（例如：xxx,xxx））'
        },
        { value: 'double', desc: '双精度类型（保留两位小数）' },
        {
          value: 'array',
          desc: '数组类型（限制数组长度，输入数值区间（1~10）或最大值（10））'
        }
      ],
      rules: {
        configName: [{ required: true, message: '参数名称不能为空' }],
        configKey: [{ required: true, message: '参数键名不能为空' }],
        configValue: [{ required: true, message: '参数键值不能为空' }]
      }
    }
  },
  mounted() {
    this.getStatusList()
    // this.getDataList()
  },
  methods: {
    /* 获取系统默认状态 */
    async getStatusList() {
      let data = await sysNormalDisable('sys_yes_no', 'sysNormalDisable')
      this.orderList = this.orderList.concat(data)
    },
    /* 获取参数数据类型集 */
    // async getDataList() {
    //   await getForm((response) => {
    //     this.dataType = response
    //   })
    // },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogAddData.params = null
      // this.configId = null
      this.dialogAddData.isShow = false
    },
    // 校验参数键名
    checkConfigName() {
      return new Promise((resolve, reject) => {
        let obj = {
          configKey: this.ruleForm.configKey
        }
        parameterName(obj, (response) => {
          if (!response) {
            resolve(response)
          } else {
            this.$message({
              message: '参数键名已使用，请更换',
              type: 'warning'
            })
          }
        })
      })
    },
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Promise.all([_this.checkConfigName()]).then((datas) => {
            _this.subForm()
          })
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    subForm() {
      this.loading = false
      let obj = { ...this.ruleForm }
      addConfig(
        obj,
        (response) => {
          this.loading = false
          this.$emit('refresh')
          this.cancelLabel()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: '失败',
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>

<style lang="less">
// #dialogAddEdit {
// }
</style>
